<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"><head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>Browse Packages - ACME Travel</title>

<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="acme.css" rel="stylesheet" type="text/css" />
<link type="text/css" href="jquery/css/redmond/jquery-ui-1.8.6.custom.css" rel="stylesheet" />	
<script type="text/javascript" src="jquery/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="jquery/js/jquery-ui-1.8.6.custom.min.js"></script>
<script type="text/javascript" src="js/acme.js"></script>
<script type="text/javascript">
$(function() {
	$( "#startdatepicker" ).datepicker();
	$( "#returndatepicker" ).datepicker();
});

$(function() {
	var availableCities = [
		"Amsterdam",
		"Barcelona",
		"Berlin",
		"Moscow",
		"Stuttgart",
		"Minsk",
		"Beijing",
		"Delhi",
		"London",
		"Ibiza",
		"Rome",
		"Athens"
	];
	$( "#startcities" ).autocomplete({
		source: availableCities
	});

	$( "#targetcities" ).autocomplete({
		source: availableCities
	});
});

$(document).ready( function() {
	$("#form").submit(function() {
		var from = $("#startcities").val();
		var to = $("#targetcities").val();
		
		var startDate = $("#startdatepicker").datepicker("getDate").formatDate();
		var returnDate = $("#returndatepicker").datepicker("getDate").formatDate();		
		
		$.post("GetPackages", {'from': from, 'to': to, 'startDate': startDate, 'returnDate': returnDate }, function(msg) {

				$("#packages").hide();

				$("#packages").html("<h3>" + msg + "</h3>")
				.fadeIn("slow");
			});

	return false;
	});
});

</script>
</head>

<body>
<!-- start header -->
<div id="header">
<div id="logo">
<h1><a href="#">ACME Travel</a></h1>
<h2><a href="#">Light up your relaxation!</a></h2>
</div>
<div id="menu">
<ul>
<li><a href="index.html">Home</a></li>
<li class="current_page_item"><a href="Packages.html">Packages</a></li>
<li><a href="#">Destinations</a></li>
<li><a href="MyBookings.html">My Bookings</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</div>
<!-- end header -->
<!-- start page -->
<div id="page"><!-- start content -->
<div id="content">
<div class="post">
<div class="entry">

<form id="form" action="GetPackages" method="post">
<table cellspacing="15">
	<tr>
		<td>
			<div class="ui-widget">
				<h3>I'm from city: </h3>
				<input id="startcities" />
			</div>		
		</td>
		<td>
			<div class="ui-widget">
				<h3>Willing to go to: </h3>
				<input id="targetcities" />
			</div>		
		</td>		
	</tr>
	<tr>
		<td>
			<h3>Start Date:</h3>
			<div id="startdatepicker"></div>
		</td>
		<td>
			<h3>Return Date:</h3>
			<div id="returndatepicker"></div>
		</td>
	</tr>
	<tr align="right">
		<td colspan="2">
			<button>Browse Packages</button>		
		</td>
	</tr>
</table>
</form>

<div id="packages">
</div>
</div>
</div>
</div>
<!-- end content --><!-- start sidebar two -->
<div id="sidebar2" class="sidebar">
<ul>
<li>
<h2>Resort types</h2>
<ul>
<li><a href="#">Sun and beach</a></li>
<li><a href="#">Active travel</a></li>
<li><a href="#">Ski and mountains</a></li>
<li><a href="#">Healing</a></li>
<li><a href="#">Village relaxation</a></li>
<li><a href="#">Tours and cruises</a></li>
</ul>
</li>
<li>
<h2>Hot deals</h2>
<ul>
<li><a href="#">Turkey</a> (23)</li>
<li><a href="#">Egypt</a> (31)</li>
<li><a href="#">Italy</a> (12)</li>
<li><a href="#">Maldives</a> (3)</li>
<li><a href="#">Thailand</a> (7)</li>
</ul>
</li>
</ul>
</div>
<!-- end sidebar two -->
<div style="clear: both;">&nbsp;</div>
</div>
<!-- end page -->
<!-- start footer -->
<div id="footer">
<p>Copyright � 2010. <a href="#">Privacy Policy</a>
</p>
</div>
<!-- end footer -->
</body></html>